<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
			<canvas id="canvas" style="border: 2px solid #ccc; display: block;margin: 50px auto;">
			
		</canvas>
	</body>
	<script>
			//window.onload = function(){

			var canvas = document.getElementById("canvas");
			canvas.width =800;
	        canvas.height =880;
			 var context = canvas.getContext("2d");//2d环境
	        //背景为黑色
	       // context.fillStyle="black";
	        //设置渐变色线线性渐变
	      context.save();
	        var skyStyle1 = context.createLinearGradient(0,0,0,canvas.height*0.7);
	        skyStyle1.addColorStop(0,"black");
	        skyStyle1.addColorStop(1,"#035");
	        context.fillStyle=skyStyle1;
	        context.fillRect(0,0,canvas.width,canvas.height);
	        context.restore();
	        //径向渐变（在下方）
	  /*     context.save();
	         var skyStyle = context.createRadialGradient(
	         			canvas.width/2,canvas.height,0,
	         			canvas.width/2,canvas.height,canvas.height*0.3);
	         skyStyle.addColorStop(0.0,"#fff");			
	       // skyStyle.addColorStop(0.2,"black");
	        skyStyle.addColorStop(1,"#035");
	        context.fillStyle=skyStyle;
	        context.fillRect(0,0,canvas.width,canvas.height);
	        context.restore();*/
	        
		
for(var i=0; i<50; i++){
		var R=Math.random()*5+5;
		var x = Math.random()*canvas.width;
	 	//var y = Math.random()*canvas.height;
	 	//只有半边有星星
	 	var y = Math.random()*canvas.height*0.38;
		var a =Math.random()*360;
		drawStar(context, x, y, R,a);
	}
		
function drawStar(cxt,x,y,r,rot){
	//保存点
	cxt.save();
	
	cxt.translate(x,y);//偏移
	cxt.rotate(rot/180*Math.PI);//旋转
	cxt.scale(r+1,r+1);//缩放||但是也会放大线条宽度和其实点（偏移了）
	starPath(cxt);//绘制图形
	cxt.fillStyle='yellow';//填充色
	// cxt.strokeStyle='blue';//线条色
	// cxt.lineWidth=3;//线条宽
	 //cxt.lineJoin='round';//线条交界处样式
	 //操作
	 cxt.fill();//填充
	// cxt.stroke();//描边
	
	cxt.restore();//清空样式
}
	function starPath(cxt){
		cxt.beginPath();
		for(var i=0; i<5; i++){
			cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),
										 -Math.sin((18+i*72)/180*Math.PI));
		 	cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,
										 -Math.sin((54+i*72)/180*Math.PI)*0.5);
		}
		cxt.closePath();
	}	
//}
	</script>
</html>
